<template>
  <div>
    <div class="printTest">
      <div :id="printId">
        <div v-for="(item, index) in list" :key="index" style="page-break-after: always">
          <div class="printBox">
            <div class="textBox">
              <div>商户名：{{ item.FCustName }}</div>
              <div>{{ item?.FMaterialName }}</div>
              <div>实称数：{{ item?.F_TEZV_JHSL }}</div>
              <div>下单数：{{ item?.FQty }}</div>
            </div>
            <div style="width: 70px; height: 70px">
              <qrcode-vue
                class="qrcode"
                id="qrcode"
                :value="value"
                :level="level"
                :size="70"
                :render-as="renderAs"
              >
              </qrcode-vue>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import QrcodeVue, { type Level, type RenderAs } from 'qrcode.vue'
const value = ref(`请咨询拣货方`)
const level = ref<Level>('M')
const renderAs = ref<RenderAs>('canvas')
const { list, printId } = defineProps<{
  list: any
  printId: string
}>()
</script>

<style scoped lang="less">
.printTest {
  position: absolute;
  bottom: 0;
  left: -9999px;
}
.printBox {
  display: flex;
  align-items: center;
  padding: 10px;
  background: #fff;
  .textBox {
    width: 220px;
    text-align: left;
    font-size: 18px;
    color: #000;
    margin-right: 20px;
  }
}
</style>
